.my {
  height: 100vh;
  background-color: #e5f8f5;

  .my-top {
    width: 95%;
    margin: auto;
    align-items: center;
    display: flex;

    .mt-left {
      width: 30%;
      text-align: center;

      image {
        width: 130rpx;
        height: 130rpx;
        border-radius: 50%;
      }

      .vip {
        width: 90%;
        margin: auto;
        margin-top: -30rpx;
        height: 45rpx;
        color: white;
        display: flex;
        justify-content: space-evenly;
        position: relative;
        z-index: 999;
        align-items: center;
        font-size: 25rpx;
        background-color: #0e908c;
        border-radius: 50rpx;

        image {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }

    .mt-right {
      width: 70%;
      margin-left: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .mr-name {
        .mr-name-phon {
          color: silver;
        }
      }
    }
  }

  .my-vip {
    width: 95%;
    height: 70rpx;
    line-height: 70rpx;
    margin: auto;
    margin-top: 30rpx;
    background-color: #d9af7f;
    border-radius: 10rpx;
    .mv-box {
      width: 95%;
      margin: auto;
      display: flex;
      .mv-box-left{
        font-style: oblique;
        color: #93550e;
        font-weight: bolder;
        font-size: 40rpx;
      }
      .mv-box-right{
        margin-left: 20rpx;
        font-size: 25rpx;
        color: #ac7738;
      }
    }
  }
  .my-grid{
    width: 95%;
    margin: auto;
    margin-top: 30rpx;
    background-color: white;
    border-radius: 10rpx;
  }
  .my-service{
    width: 20%;
    background-color: white;
    border-radius: 10rpx;
    text-align: center;
    position: fixed;
    right: 0;
    bottom: 300rpx;
    image{
      width: 70rpx;
      height: 70rpx;
    }
  }
}